<template>
  <div>
    这是一个父组件num: {{ num }}
    <button @click="hAdd">实现修改Add 1</button>
    <div ref="myDiv">{{ num }}</div>
    <hr>
    <br>
    <son ref="mySon" :num="num" />
  </div>

</template>

<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data() {
    return {
      num: 100
    }
  },
  methods: {
    hAdd() {
      // this.num = this.num + 1
      // // dom的更新是异步的
      // console.log(this.$refs.myDiv.innerHTML, 'this.$ref.myDiv.innerHTML')
      // //  this.$nextTick 保存dom更新完成之后才执行里面的回调函数
      // this.$nextTick(function() {
      //   console.log(this.$refs.myDiv.innerHTML, '$nextTick')
      // })
      // // Promise  微任务----》   dom渲染-----》    宏任务   (setTimeout, 事件,ajax)
      // setTimeout(() => {
      //   console.log(this.$refs.myDiv.innerHTML, 'setTimeout')
      // }, 0)
      this.num = this.num + 1
      setTimeout(() => {
        this.$refs.mySon.getNum()
      }, 0)
    }
  }
}
</script>

<style>

</style>
